import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import styles from "./index.module.scss";
import { getPlayList, Info } from "@/api/playlist/index";
import { ServiceO } from "@react-vant/icons";
import { Loading } from "react-vant";
import PlayMusicList from "@/components/PlayMusicList/index";
import { addCollect } from "@/helpers/localStorage";
const Playlist = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState<boolean>(false);
  const [info, setinfo] = useState<Info>({
    coverImgUrl: "",
    playCount: "",
    name: "",
    nickname: "",
    avatarUrl: "",
  });
  const [list, setlist] = useState<playList[]>([]);
  useEffect(() => {
    setLoading(true);
    getPlayList(id).then((result) => {
      setinfo(result.info);
      setlist(result.list);
    });
    setTimeout(() => {
      setLoading(false);
    }, 300);
    return () => {};
  }, [id]);

  const collect = () => {
    addCollect(info);
  };

  const style = {
    backgroundImage: `url(${info.coverImgUrl})`,
  };

  return (
    <div className={styles.playlist}>
      {loading ? (
        <div className={styles.loading_wrap}>
          <Loading color="red" />
        </div>
      ) : (
        <div className={styles.playlistWrap}>
          <div className={styles.header}>
            <div className={styles.left}>
              <div className={styles.icon}>
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"></path>
                </svg>
              </div>
              <div className={styles.text}>歌单</div>
            </div>
            <div className={styles.right}>
              <div>
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path d="M440 112m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"></path>
                  <path d="M440 440m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"></path>
                  <path d="M440 768m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"></path>
                </svg>
              </div>
            </div>
          </div>
          <div className={styles.info_wrap}>
            <div className={styles.bg} style={style}></div>

            <div className={styles.info}>
              <div className={styles.img_wrap}>
                <img src={info.coverImgUrl} alt="" />
                <div className={styles.song_wrap}>歌单</div>
                <div className={styles.playCount}>
                  <ServiceO />
                  <span>{info.playCount}</span>
                </div>
              </div>
              <div className={styles.info_text}>
                <div className={styles.name}>
                  <p>{info.name}</p>
                </div>
                <div className={styles.nickname}>
                  <img src={info.avatarUrl} alt="" />
                  <span>{info.nickname}</span>
                </div>
              </div>
            </div>

            <div className={styles.funcWrap}>
              <div>分享</div>
              <div
                onClick={() =>
                  navigate(`/songcomment`, {
                    state: {
                      type: 2,
                      id: id,
                    },
                  })
                }
              >
                评论
              </div>
              <div onClick={() => collect()}>+ 收藏</div>
            </div>
            {/* <div className={styles.numInfo}>
              <div>
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"></path>
                  <path d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"></path>
                </svg>
                <div>999+</div>
              </div>
              <div>
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path d="M884.7 127.6H140.3c-49.5 0-89.7 40.2-89.7 89.7v456.5c0 49.5 40.2 89.7 89.7 89.7h252.6l119.4 136.7 124-136.7h248.3c49.5 0 89.7-40.2 89.7-89.7V217.3c0.1-49.5-40.1-89.7-89.6-89.7z m70.8 546.2c0 39.1-31.8 70.9-70.9 70.9H628L512.6 871.9 401.5 744.7H140.3c-39.1 0-70.9-31.8-70.9-70.9V217.3c0-39.1 31.8-70.9 70.9-70.9h744.4c39.1 0 70.9 31.8 70.9 70.9v456.5z"></path>
                  <path d="M220.6 265.8h528.2v18.9H220.6zM826.2 290.6c8.5 0 15.3-6.9 15.3-15.3s-6.9-15.3-15.3-15.3-15.3 6.9-15.3 15.3 6.9 15.3 15.3 15.3zM222.6 394.7h528.2v18.9H222.6z"></path>
                  <path d="M828.2 404.1m-15.3 0a15.3 15.3 0 1 0 30.6 0 15.3 15.3 0 1 0-30.6 0Z"></path>
                  <path d="M222.6 523.5h528.2v18.9H222.6z"></path>
                  <path d="M828.2 532.9m-15.3 0a15.3 15.3 0 1 0 30.6 0 15.3 15.3 0 1 0-30.6 0Z"></path>
                </svg>
                <div>999+</div>
              </div>
              <div>
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path d="M876.65 944.84H160.26a75.19 75.19 0 0 1-75.11-75.11V153.34a75.19 75.19 0 0 1 75.11-75.11h716.39a75.19 75.19 0 0 1 75.11 75.11v716.39a75.19 75.19 0 0 1-75.11 75.11zM160.26 118.23a35.15 35.15 0 0 0-35.11 35.11v716.39a35.15 35.15 0 0 0 35.11 35.11h716.39a35.15 35.15 0 0 0 35.11-35.11V153.34a35.15 35.15 0 0 0-35.11-35.11z"></path>
                  <path d="M527.66 757.7a20 20 0 0 1-20-20V270.83a20 20 0 0 1 40 0V737.7a20 20 0 0 1-20 20z"></path>
                  <path d="M761.09 524.26H294.22a20 20 0 0 1 0-40h466.87a20 20 0 0 1 0 40z"></path>
                </svg>
                <div>999+</div>
              </div>
              <div>
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path d="M996.01 1024H27.99c-7.318 0-13.825-2.837-19.5-8.49-5.653-5.675-8.49-12.16-8.49-19.5 0-8.02 2.837-14.677 8.49-20.01 5.675-5.333 12.16-8 19.5-8h968.02c7.318 0 13.825 2.667 19.5 8 5.653 5.333 8.49 11.99 8.49 20.01 0 7.318-2.837 13.825-8.49 19.5-5.675 5.653-12.16 8.49-19.5 8.49z m-69.013-648c5.334 5.333 7.83 11.99 7.51 20.01-0.342 8-3.84 14.998-10.496 20.993L529.984 811.989l-4.992 2.006-2.987 2.986a44.8 44.8 0 0 1-22.997 0l-2.005-2.986a6.784 6.784 0 0 1-5.014-1.984L97.003 417.003a33.216 33.216 0 0 1-6.998-21.014c0-8 2.496-14.506 7.488-19.498 5.014-4.992 11.84-7.488 20.502-7.488 8.682 0 15.338 2.346 20.01 6.997l347.968 346.005V27.99c0-8 2.496-14.656 7.51-19.989C498.496 2.667 504.66 0 512 0s13.504 2.667 18.496 8c5.013 5.333 7.51 11.99 7.51 20.01v693.974l347.967-345.963c4.672-4.672 11.35-6.997 20.011-6.997s15.659 2.347 20.992 6.997z"></path>
                </svg>
                <div>999+</div>
              </div>
            </div> */}
          </div>
          <div className={styles.list}>
            <div className={styles.list_title}>
              <div className={styles.icon}>
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                >
                  <path
                    d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                    fill="#d81e06"
                  ></path>
                  <path
                    d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                    fill="#d81e06"
                  ></path>
                </svg>
              </div>
              <div className={styles.text}>播放全部</div>
              <div className={styles.sum}>({list.length})</div>
            </div>
            <PlayMusicList list={list} />
          </div>
        </div>
      )}
    </div>
  );
};

export default Playlist;
